.home {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: url(/assets/images/bgcolor.jpg);
  background-repeat: no-repeat;
  background-size: cover;

  .pixiCanvas {
    position: relative;
    transform-origin: center;
  }

  .header {
    position: absolute;
    top: 0;
    z-index: 100;
    & > div {
      background-color: transparent;
      box-shadow: none;
      i,
      span,
      a {
        border-bottom: none !important;
        color: #fff !important;
      }
    }
    :global(.logo) {
      background-image: url(/assets/images/logow.png) !important;
    }
  }

  .progress {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 100;
    color: #fff;
    font-family: JamMono;
    em,
    i {
      font-style: normal;
    }
    em {
      font-size: 24px;
      margin-right: 5px;
    }
    i {
      opacity: 0.5;
      margin-left: 5px;
      font-size: 12px;
    }
  }
  .mouse {
    cursor: pointer;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    text-align: center;
    img {
      position: relative;
      top: 20px;
    }
    .icon {
      position: relative;
      animation: jumpAnimate 2s ease-in-out 0s infinite;
    }
  }
  .music {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 100;
  }
}

.threeBg {
  margin: 0;
  display: block;
  overflow: hidden;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

@keyframes jumpAnimate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

:global {
  #canvas {
    width: 100%;
    height: 100%;
    min-width: 1200px;
  }
}
